<template>
    <div class="div-table">
        <el-scrollbar style="height:100%;">
            <div class="list-div">
                <el-row v-for="(item,index) in doorModel" :key="index">
                    <div @click="value = item.pkHouseTypeId">
                        <el-col :span="24">
                            <el-row>
                                <el-col :span="21" class="title color-blue">
                                    {{ item.houseTypeName }}
                                    <span class="title-prop" v-for="(text,index) in item.supportingFacilitiesList"
                                        :key="index">
                                        {{text | commonFilter(supportingFacilities)}}
                                    </span>
                                </el-col>
                                <el-col v-if="type=='list'" :span="3" style="display: flex; justify-content: center">
                                    <router-link class="a-edit" :to="{path:`/doorModel/edit/${item.pkHouseTypeId}`}">
                                        <img src="../assets/img/housing/fygl_lygl_editorr_default_.png" />
                                        编辑
                                    </router-link>
                                    <a class="a-delete" @click="deleteDoorModel(item.pkHouseTypeId)">
                                        <img src="../assets/img/housing/fygl_lygl_delete_default_.png" />
                                        删除
                                    </a>
                                </el-col>
                            </el-row>
                            <el-row>
                                <!-- <el-col :span="6">房屋户型:{{ item.houseTypeName  }}</el-col> -->
                                <el-col :span="6">朝向:{{ item.roomFacing | commonFilter(facing) }}</el-col>
                                <el-col :span="6">房间户型:{{ item.fkRoomTypeId | commonFilter(roomType) }}</el-col>
                                <el-col :span="6">实用面积:{{ item.usableArea }}平方米</el-col>
                                <template v-if="type=='list'">
                                    <el-col :span="6">建筑面积:{{ item.constructionArea  }}平方米</el-col>
                                </template>
                                <template v-else-if="type=='roomEdit'">
                                    <el-col :span="4">建筑面积:{{ item.constructionArea  }}平方米</el-col>
                                    <el-col :span="2" class="list-radio" style="text-align: right">
                                        <el-radio v-model="value" :label="item.pkHouseTypeId">&nbsp;</el-radio>
                                    </el-col>
                                </template>
                            </el-row>
                            <el-row>
                                <el-col :span="6">
                                    <up-img :imgList="item.apartmentRenderings" imgScale=".6" pattern
                                        btnImg="/static/images/show.png" imgWidth="100px"></up-img>
                                </el-col>
                                <el-col :span="6">所属楼宇:{{ item.buildingName}}</el-col>
                                <el-col :span="12">备注:{{item.remarks}}</el-col>
                            </el-row>
                        </el-col>
                    </div>
                </el-row>
            </div>
        </el-scrollbar>
    </div>
</template>
<script>
    import upImg from '@/components/upImg'
    import {
        deleteHouseType,
    } from "../api/house/type/type.js";
    export default {
        name: "doorModelList",
        components: { upImg },
        props: {
            type: String,
            value: null,
            doorModel: Array,
            supportingFacilities: Array,
            facing: Array,
            roomType: Array,
        },
        data() {
            return {
            }
        },
        watch: {
            value(newVal, oldVal) {
                this.$emit('input', newVal);
            }
        },
        methods: {
            deleteDoorModel(id) {
                let l_h = this.doorModel.filter(item => {
                    return item.pkHouseTypeId === id;
                });
                if (l_h && l_h[0]) {
                    this.$promptBox.show({ title: "是否删除", message: "是否删除" + l_h[0].houseTypeName })
                        .then(() => {
                            deleteHouseType(id).then((result) => {
                                if (result.code === 10000) {
                                    this.$message.success(result.msg);
                                    this.$emit('reLoad');
                                }
                            });
                        });
                }
            }
        },
    }
</script>
<style scoped>
    a {
        margin: 0 0.05rem;
    }

    a:hover {
        color: #4291fa;
        text-decoration: none;
    }

    a>img {
        height: 0.2rem;
    }

    .a-edit:hover img {
        content: url("../assets/img/housing/fygl_lygl_editor_hover_.png") !important;
    }

    .a-delete:hover img {
        content: url("../assets/img/housing/fygl_lygl_delete_hover_.png");
    }
</style>

